<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
    当前用户：<span id="currentUser"></span><br/>
    发给：<input type="text" id="toUser"><br/>
    消息：<input type="text" id="msgInput" style="width: 400px;"><br/>
    <input type="submit" value="Start" onclick="start()"/>
</div>
<div id="messages"></div>
<script type="text/javascript">
    var userName = "35fcf832-d6c9-4c73-84ef-3cb406e12192";
    if (!userName || userName == '') {
        userName = randomString(4)
        sessionStorage.setItem("name", userName);
    }
    $('#currentUser').html(userName);
    let order = {
        'driverArrivedTime': '2021-04-19T02:39:16.760Z',
        'driverGrabTime': '2021-04-19T02:39:16.760Z',
        'driverId': 0,
        'driverPhone': 'string',
        'driverStartTime': '2021-04-19T02:39:16.760Z',
        'driverStatus': 0,
        'endAddress': '中山利和广场',
        'endLatitude': '22.512457',
        'endLongitude': '113.38395',
        'id': 0,
        'isCancel': 0,
        'isPaid': 0,
        'orderNumber': '5704710684115524',
        'orderStartTime': '2021-04-19T02:39:16.760Z',
        'passengerGetoffLatitude': 'string',
        'passengerGetoffLongitude': 'string',
        'passengerGetoffTime': '2021-04-19T02:39:16.760Z',
        'passengerInfoId': 66,
        'passengerPhone': '123456',
        'payType': 0,
        'plateNumber': 'string',
        'receivePassengerLatitude': 'string',
        'receivePassengerLongitude': 'string',
        'receivePassengerTime': '2021-04-19T02:39:16.760Z',
        'startAddress': '中山职业技术学院',
        'startLatitude': '22.513381',
        'startLongitude': '113.43257',
        'startTime': '2021-04-19T02:39:16.760Z',
        'status': 0,
        'userLatitude': '22.531913',
        'userLongitude': '113.406185'
    }
    var webSocket = new WebSocket('ws://localhost:8813/websocket/' + userName);

    webSocket.onerror = function (event) {
        onError(event)
    };

    webSocket.onopen = function (event) {
        onOpen(event)
    };

    webSocket.onmessage = function (event) {
        onMessage(event)
    };

    function onMessage(event) {
        var msg = JSON.parse(event.data)
        if (msg && msg.ping && msg.ping != '') {
            webSocket.send('{"pong":"' + msg.ping +
                '","identity":"' + "passenger" +
                '","token":"' + userName +
                '","userLongitude":"' + "113.406185" +
                '","userLatitude":"' + "22.531913" + '"}');
        } else {
            document.getElementById('messages').innerHTML += '<br />' + msg.msg;
        }
    }

    function onOpen(event) {
        document.getElementById('messages').innerHTML
            = 'Connection established';
    }

    function onError(event) {
        alert(event.data);
    }

    function start() {
        var msg = $('#msgInput').val();
        var toUser = $('#toUser').val();
        if (!toUser || toUser == '') {
            toUser = "All";
        }
        if (msg && msg != '') {
            webSocket.send('{"to":"' + toUser + '","msg":' + JSON.stringify(order) + '}');
            // webSocket.send('{"to":"' + toUser + '","msg":"' + msg + '"}');
        } else {
            alert("发送的消息不能为空");
        }
    }


    function randomString(len) {
        len = len || 32;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        var maxPos = $chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
</script>
</body>
</html>